import { DefineComponent } from 'vue'

interface IVueLayout {
  [ k: string ]: DefineComponent
}

const modules = import.meta.globEager('./layouts/*.vue')
const VueLayout: IVueLayout = Object.keys(modules).reduce((previousValue, currentFileName) => {
  const moduleName = currentFileName.replace(/^\.\/layouts\/(.*)\.\w+$/, '$1')
  const value = modules[currentFileName] as DefineComponent
  previousValue[moduleName] = value.default
  return previousValue
}, {} as IVueLayout)

export default () => (
  <>
    <aside class="App-L">
      <VueLayout.LeftTop />
      <VueLayout.LeftMiddle />
    </aside>
    <main class="App-M">
      <VueLayout.IMap />
    </main>
    <aside class="App-R">
      <VueLayout.RightTop />
    </aside>
  </>
)
